<template>
   <van-nav-bar left-arrow>
      <template #left>
         <router-link to="/city">城市</router-link>
      </template>
      <template #title>
         <router-link to="/search">治州大宝贝</router-link>
      </template>
      <template #right>
         <router-link to="/login" v-if="!user.userid">登陆</router-link>
         <router-link to="/user" v-else>我的</router-link>
      </template>
   </van-nav-bar>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';
import { useUserStore } from '@/store/userStore'
const user = useUserStore()
</script>

<style scoped lang='scss'>
.van-nav-bar {
   font-weight: bold;
   background: #d30707;

   :deep(.van-nav-bar__left) {
      a {
         color: #fff;
      }

      font-size: 16px;
   }

   :deep(.van-nav-bar__title) {
      background: #fff;
      height: 32px;
      max-width: 70%;
      line-height: 32px;
      flex: 1;
      border-radius: 30px;
      box-sizing: border-box;
      padding-left: 36px;
      text-align: left;
      color: #232326;
      font-size: 12px;
   }

      :deep(.van-nav-bar__right) {
      font-size: 16px;

      a {
         color: #fff;
      }
   }
}
</style>
